<template>
  <div>
    <div
      v-for="food in foods"
      :key="food._id"
    >
      {{ food.name['zh-CN'] }}
    </div>
    <div
      v-if="loading"
      class="loading-container"
    >
      <img
        src="@/assets/loading.gif"
        alt=""
        class="loading-img"
      >
    </div>
  </div>
</template>

<script>
import { getMenu } from '@/api/menu';

export default {
  data() {
    return {
      loading: false,
      foods: [],
    };
  },
  created() {
    this.loadMenu();
  },
  methods: {
    async loadMenu() {
      // ? 通过query
    //   console.log(this.$route.query);

      // ? 通过params(不会放到url不会记住 刷新页面数据就没了)
      //   console.log(this.$route.params);

      // ? 动态路由(设置好动态路由之后 /menu/:id)
      try {
        this.loading = true;
        const { id } = this.$route.params;
        const result = await getMenu(id);
        this.foods = result.foods;
      } catch (error) {
        alert(error.message);
      } finally {
        this.loading = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>

</style>
